<template>
  <main>
    <div class="setting">
      <div class="UserName">
        <span>用户名称:</span>
        <input type="text" name="" id="" v-model="UserName" @change="存储数据()">
      </div>
    </div>
  </main>
</template>
<script setup>
import { ref, defineProps, defineExpose, computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

const props = defineProps({
  UserId: { type: String, required: true }
})
const UserName = ref("")
// const SaveID = props.UserId
const SaveID = computed(() => {
  return props.UserId;
});
function 存储数据() {
  localStorage.setItem(SaveID, UserName.value);
  // const savedValue = localStorage.getItem('myValue'); 读取
}
function 写入数据() {
  const UserName1Save = localStorage.getItem(SaveID);
  switch (UserName1Save) {
    case null: break;
    default: UserName.value = UserName1Save;
  }
}
写入数据();
defineExpose({
  UserName
})
</script>
<style scoped>
main {
  height: 100%;
}

.setting {
  max-width: 600px;
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.UserName input {
  color: brown;
  text-align: center;
}

input{
  outline: none;
  border: none;
  border-bottom: 1px solid;
  background-color: initial;
  height: 32px;
  line-height: 31px;
  padding-left: 5px;
  padding-right: 5px;
}
</style>